<template>
  <div class="ycdwrap">
    <div class="yc-table-wrp">
      <div>
        <yc-title class="title" value="菜单管理"></yc-title>
      </div>
      <yc-button class="newadd" @click="handleNewParent"  value="新增"></yc-button>
      <yc-table ref="getPage" :total="total" :tableData="records"></yc-table>
    </div>
    <!--  弹框 -->
    <div  class="newadddcmd">
      <el-dialog  title="添加菜单" top="250px" id="addRole" custom-class="newAddCoryRightWrapper"  :visible.sync="show">
        <el-form label-position="left" :model="form">
          <el-form-item label="菜单父级" label-width="80px">
            <el-select style="width: 86%;" v-model="form.parentId" placeholder="请选择菜单父级">
              <el-option  label="---------------------" value="0"></el-option>
              <el-option v-for="(item, index) in form.parentMenu"  :label="item.text" :key="index" :value="item.menuId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" label-width="80px">
            <el-input maxlength="30" style="width: 86%;" v-model="form.text" auto-complete="off" placeholder="请输入菜单名称" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancleBtn" @click="show = false">取 消</el-button>
          <el-button type="primary" @click="handSure">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ycTable from './com/table'
import request from 'request'
import ycTitle from '@/components/ycTitle.vue'
import ycButton from '@/components/button.vue'
import ycCancelButton from '@/components/cancelButton.vue'
export default {
  name: 'menuManage',
  components: {
    ycTable,
    ycTitle,
    ycButton,
    ycCancelButton
  },
  data () {
    return {
      show: false,
      records: [],
      total: null,
      form: {
        menuId: null,
        text: '',
        parentId: '',
        parentText: '',
        parentMenu: []
      }
    }
  },
  watch: {
    show () {
      this.form.parentText = ''
    }
  },
  methods: {
    handleNewParent () {
      this.show = true
      request.newIncreaseParentMenus().then(res => {
        this.form.parentMenu = res
        this.form.parentId = ''
        this.form.text = ''
      })
    },
    handSure () {
      if (!this.form.parentId) {
        this.$message.error('请选择菜单父级')
        return
      } else if (!this.form.text) {
        this.$message.error('请输入菜单名称')
        return
      }
      request.newIncrease({
        menuId: 0,
        parentId: this.form.parentId,
        text: this.form.text
      }).then(res => {
        if (res) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          setTimeout(() => {
            this.init(this.$refs.getPage.currentPage)
          }, 500)
        }
      }).catch(res => {
        this.$message.error('添加失败')
      })
      this.show = false
    },
    init (val) {
      request.getMenu({
        params: {
          p: val || 1,
          size: 10
        }
      }).then(res => {
        this.total = res.total
        this.records = res.records
      })
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
.yc-table-wrp{
  .newadd{
    float right
    margin 20px 0
  }
}
</style>
